import React from 'react';
import {Card, Col, Row, Statistic} from 'antd';
import PieCharts from "@/pages/User/Census/Components/Pie.jsx";
import LineCharts from "@/pages/User/Census/Components/Line.jsx";
import filterArray from '@/utils/filterAddress.js'
import useList from '@/hooks/getUserList.js'
import {ArrowDownOutlined, ArrowUpOutlined} from "@ant-design/icons";

function Census() {
    const {userList} = useList()
    const datalist = filterArray(userList)
    return (
        <div>
            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                < Card
                    bordered={true}
                    style={{
                        flex: 1,
                        height: '70vh'
                    }}>
                    <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                        <PieCharts data={datalist}/>
                    </div>
                </Card>
                <Card
                    bordered={true}
                    style={{
                        flex: 1.3,
                        marginLeft: '5px',
                        height: '70vh',
                    }}>
                    <LineCharts/>
                </Card>
            </div>
            <Card
                bordered={true}
                style={{
                    marginTop: '5px',
                    width: '100%',
                    height: '125px'
                }}>
                <div style={{width: '100%', display: 'flex', justifyContent: 'space-between'}}>
                    <Statistic
                        title="今日新增用户人数"
                        value={1110}
                        valueStyle={{
                            color: '#3f8600',
                        }}
                        prefix={<ArrowUpOutlined/>}
                        suffix="人"
                    />
                    <Statistic
                        title="本月用户增长比"
                        value={9.3}
                        precision={2}
                        valueStyle={{
                            color: '#cf1322',
                        }}
                        prefix={<ArrowDownOutlined/>}
                        suffix="%"
                    />
                    <Statistic
                        title="今日访问用户人数"
                        value={58}
                        valueStyle={{
                            color: '#3f8600',
                        }}
                        prefix={<ArrowUpOutlined/>}
                        suffix="人"
                    />
                    <Statistic
                        title="本月注销账户人数"
                        value={520}
                        valueStyle={{
                            color: '#cf1322',
                        }}
                        prefix={<ArrowDownOutlined/>}
                        suffix="人"
                    />
                </div>
            </Card>
        </div>
    )
}
;
export default Census;